<template>  
  <div class="user-management">  
    <h2>用户管理</h2>  
    <form @submit.prevent="addUser">  
      <div>  
        <label for="name">姓名:</label>  
        <input type="text" v-model="newUser.name" required />  
      </div>  
      <div>  
        <label for="email">邮箱:</label>  
        <input type="email" v-model="newUser.email" required />  
      </div>  
      <button type="submit">添加用户</button>  
    </form>  
  
    <h3>用户列表</h3>  
    <ul>  
      <li v-for="user in users" :key="user.id">  
        {{ user.name }} ({{ user.email }})  
        <button @click="deleteUser(user.id)">删除</button>  
      </li>  
    </ul>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      newUser: {  
        name: '',  
        email: ''  
      },  
      users: [   
        { id: 1, name: '张三', email: 'zhangsan@example.com' },  
        { id: 2, name: '李四', email: 'lisi@example.com' }  
      ],  
      nextId: 3 
    };  
  },  
  methods: {  
    addUser() {  
      if (this.newUser.name && this.newUser.email) {  
        const newUserId = this.nextId++;  
        this.users.push({ id: newUserId, ...this.newUser });  
        this.newUser.name = '';  
        this.newUser.email = '';  
      }  
    },  
    deleteUser(id) {  
      this.users = this.users.filter(user => user.id !== id);  
    }  
  }  
};  
</script>  
  
<style scoped>  
.user-management {  
  max-width: 600px;  
  margin: 0 auto;  
  padding: 20px;  
  border: 1px solid #ccc;  
  border-radius: 8px;  
}  
  
form {  
  margin-bottom: 20px;  
}  
  
form div {  
  margin-bottom: 10px;  
}  
  
label {  
  display: inline-block;  
  width: 80px;  
}  
  
input {  
  width: calc(100% - 90px);  
  padding: 5px;  
  box-sizing: border-box;  
}  
  
button {  
  margin-left: 85px;  
  padding: 5px 10px;  
  cursor: pointer;  
}  
  
ul {  
  list-style-type: none;  
  padding: 0;  
}  
  
li {  
  background: #f9f9f9;  
  margin-bottom: 10px;  
  padding: 10px;  
  border: 1px solid #ddd;  
  border-radius: 4px;  
  display: flex;  
  justify-content: space-between;  
  align-items: center;  
}  
  
button[type="submit"],  
button[type="button"] {  
  background-color: #42b983;  
  color: white;  
  border: none;  
  border-radius: 4px;  
  cursor: pointer;  
}  
  
button[type="button"]:hover {  
  background-color: #36976f;  
}  
</style>